<template>
  <div class="dashboard-container">
    <div class="app-container">题库-精选</div>
    <!-- 按钮部分 -->
    <el-card shadow="never">
      <div class="btn">
        <el-button type="primary">新增试题</el-button>
        <el-button type="success">批量导入</el-button>
      </div>
      <el-form v-model="reqParams" label-width="80px" size="small" class="question-chose">
        <!-- 学科选择部分 -->
        <el-form-item label="学科">
          <el-select v-model="value" placeholder="请选择" size="mini" style="width:140px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--状态部分-->
        <el-form-item label="状态">
          <el-select v-model="value" placeholder="请选择" size="mini" style="width:140px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 难度部分 -->
        <el-form-item label="难度">
          <el-select v-model="value" placeholder="请选择" size="mini" style="width:140px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 试题类型部分 -->
        <el-form-item label="试题类型">
          <el-select v-model="value" placeholder="请选择" size="mini" style="width:140px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 标签部分 -->
        <el-form-item label="标签">
          <el-input style="width:140px" v-model="input" placeholder="请输入内容" size="mini"></el-input>
        </el-form-item>
        <!-- 录入部分 -->
        <el-form-item label="录入人">
          <el-input style="width:110px" v-model="input" placeholder="请输入内容" size="mini"></el-input>
        </el-form-item>
        <!--关键字部分-->
        <el-form-item label="关键字">
          <el-input style="width:110px" v-model="input" placeholder="请输入题目标号/题干" size="mini"></el-input>
        </el-form-item>
        <!--题目备注-->
        <el-form-item label="题目备注">
          <el-input style="width:110px" v-model="input" placeholder="请输入内容" size="mini"></el-input>
        </el-form-item>
        <!--二级目录-->
        <el-form-item label="二级目录">
          <el-input style="width:110px" v-model="input" placeholder="请输入二级目录" size="mini"></el-input>
        </el-form-item>
        <!--城市部分-->
        <el-form-item  label="城市">
          <el-select v-model="value1" multiple placeholder="请选择" size="mini" style="width:110px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>

          <el-select
            size="mini"
            style="width:110px;margin-left: 20px;"
            v-model="value2"
            multiple
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--企业简称-->
        <el-form-item label="企业简称">
          <el-input style="width:110px" v-model="input" placeholder="请输入内容" size="mini"></el-input>
        </el-form-item>
        <!--方向部分-->
        <el-form-item label="方向">
          <el-input style="width:110px" v-model="input" placeholder="请输入内容" size="mini"></el-input>
        </el-form-item>
      </el-form>

      <!--列表部分-->
      <div class="question_list">
        <el-tabs type="border-card">
          <el-tab-pane label="全部">
            <!--列表-->
          </el-tab-pane>
          <el-tab-pane label="待审核">待审核</el-tab-pane>
          <el-tab-pane label="已审核">已审核</el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'QuestionsChoice',
  data() {
    return {}
  }
}
</script>

<style scoped lang="scss">
// 1. 如果在此处 scoped 当前组件下生效样式
// 2. 在style中的所有选择器 编译的时候会自动带上属性选择器
// 3. .box{} ===> .box[data-v-2c9827a4]{} 交集选择器
// 4. 在当前组件下暴露的标签都会加上 data-v-2c9827a4 属性
// 5. 但是如果是组件，其他组件内部的标签是不会加上这个属性 意味写组件内部的样式是不会生效的
// 6. 其他组件的样式都不会生效
.btn {
  margin-bottom: 20px;
}
.question-chose {
  overflow: hidden;
  .box1 {
    float: left;
    background: #ccc;
    margin-right: 10px;
    margin-top: 10px;
  }
}

.question_list {
  margin-top: 20px;
}
</style>
